<template>
	<view class="content_goods">
		<view class="header_top">
			<view class="search_card">
				<view class="left_s">
					<uni-easyinput
						prefixIcon="search"
						@keydown.enter="OrderGoodsList"
						placeholderStyle="font-size:28rpx;"
						v-model="keyword"
						:inputBorder="false"
						@input="OrderGoodsList"
						placeholder="输入型号/名称/规格搜索"
						@clear="OrderGoodsList"
						@confirm="OrderGoodsList"
					></uni-easyinput>
					<view class="search_btn" @click="OrderGoodsList">搜索</view>
				</view>
			</view>
		</view>
		<view class="bodyer">
			<view class="goods_list" v-if="orderGoodsList.length > 0">
				<view
					class="goods_item"
					v-for="(item, index) in orderGoodsList"
					:key="index"
				>
					<view class="goods_item_left">
						<view class="item_img">
							<image
								:src="item.image"
								v-if="item.image"
								@click="lookImg(item.image)"
								class="_img"
								mode="aspectFill"
							></image>
							<uni-icons color="#aac" size="48" v-else type="image"></uni-icons>
						</view>

						<view class="item_title">
							<view class="item_title_brand">
								{{ item.name }}
							</view>
							<view class="item_title_text">
								编号：
								<span class="item_title_color">{{ item.code }}</span>
							</view>
							<view class="item_title_text">
								型号：
								<span class="item_title_color">{{ item.model }}</span>
							</view>
							<view class="item_title_text">
								规格：
								<span class="item_title_color">{{ item.specName }}</span>
							</view>
						</view>
					</view>
					<uni-icons
						type="plus-filled"
						size="26"
						@click="addGoods(item)"
						color="#007cff"
						v-if="!adddeleteList.includes(item.specId)"
					></uni-icons>
					<uni-icons
						type="minus-filled"
						size="26"
						@click="deleteGoods(item)"
						v-else
						color="#FF5733"
					></uni-icons>
				</view>
				<view class="no_some" v-if="title">
					{{ title }}
				</view>
			</view>
			<view v-else class="void_goods">
				<image class="img" src="/static/goods.svg" mode="aspectFit"></image>
				<view class="tip">暂无商品</view>
			</view>
			<!-- 提交按钮 -->
			<view class="activeBtn" v-if="store.getters.getTotalList.length > 0">
				<view class="btn_Confirm">
					<view class="show_Confirm">
						已选择&nbsp;
						<span style="color: #007cff; font-weight: bold">
							{{ store.getters.getTotalNum }}
						</span>
						&nbsp;个产品
						<view class="details" @click="lookDetail()">
							明细
							<uni-icons type="top" color="#007cff"></uni-icons>
						</view>
					</view>
					<view class="btn" @click="btnSubmit">
						<view class="text">确认提交</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 明细弹窗 -->
		<uni-popup
			ref="popupMyGoodsDetailRef"
			type="bottom"
			background-color="#eee"
		>
			<view class="goodspopup">
				<view class="text_top_popup">
					已选择商品
					<uni-icons
						class="icon"
						color="#333"
						@click="popupMyGoodsDetailRef.close()"
						size="21"
						type="closeempty"
					></uni-icons>
				</view>
				<view>
					<view
						class="goods_list"
						v-if="store.state.orderGoodsTypes.length > 0"
					>
						<view
							v-for="(brand, brandIndex) in store.state.orderGoodsTypes"
							:key="brandIndex"
						>
							<view
								v-for="(classify, classifyIndex) in brand.checkClassifyList"
								:key="classifyIndex"
							>
								<view
									class="goods_item"
									v-for="(item, index) in classify.orderGoodsVos"
									:key="index"
								>
									<view class="goods_item_left">
										<view class="item_img">
											<image
												:src="item.image"
												v-if="item.image"
												@click="lookImg(item.image)"
												class="_img"
												mode="aspectFill"
											></image>
											<uni-icons
												color="#aac"
												size="48"
												v-else
												type="image"
											></uni-icons>
										</view>
										<view class="item_title">
											<view class="item_title_brand">
												{{ item.name }}
											</view>
											<view class="item_title_text">
												编号：
												<span class="item_title_color">
													{{ item.goodsCode }}
												</span>
											</view>
											<view class="item_title_text">
												型号：
												<span class="item_title_color">{{ item.model }}</span>
											</view>
											<view class="item_title_text">
												规格：
												<span class="item_title_color">
													{{ item.specName }}
												</span>
											</view>
											<view class="item_title_code" v-if="item.code">
												SN码/一物一码：
												<span class="item_title_color">{{ item.code }}</span>
											</view>
											<view class="good-qty-fill">
												<view class="label">数量：</view>
												<view class="qty-fill">
													<uni-number-box
														:value="item.qty"
														@change="(val: number) => handleUpdateQty(brandIndex, classifyIndex, index, val)"
													></uni-number-box>
												</view>
											</view>
										</view>
									</view>
									<uni-icons
										type="minus-filled"
										size="26"
										@click="deleteGoodsDetail(item)"
										color="#FF5733"
									></uni-icons>
								</view>
							</view>
						</view>
					</view>
					<view v-else class="void_goods">
						<image class="img" src="/static/goods.svg" mode="aspectFit"></image>
						<view class="tip">暂无商品</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import {ref} from 'vue';
	import apiGoods from '@/util/network_api/goods.js';
	import {
		onLoad,
		onReachBottom,
		onPullDownRefresh,
		onUnload,
	} from '@dcloudio/uni-app';
	import store from '@/store_network/index.js';
	import _ from 'lodash';

	// 是否显示商品明细，用于在第一次确定提交时弹出明细让用户确认
	const isShowGoodDetailList = ref(true)

	/**
	 * @param {Number} brandIndex - 品牌索引
	 * @param {Number} classifyIndex - 分类索引
	 * @param {Number} goodIndex - 商品索引
	 * @param {Number} qty - 数量
	 */
	const handleUpdateQty = (
		brandIndex: number,
		classifyIndex: number,
		goodIndex: number,
		qty: number,
	) => {
		store.commit('updateOrderGoodQty', {
			brandIndex,
			classifyIndex,
			goodIndex,
			qty,
		});
	};

	// 通过onLoad接收数据
	onLoad(async (e) => {
		await OrderGoodsList();
		getAddgoodsList(store.state.orderGoodsTypes);
	});
	onUnload(() => {
		uni.hideLoading();
	});
	const orderGoodsList = ref([]); //商品列表
	const keyword = ref(''); //搜索关键词：商品型号/商品名称/商品规格
	const popupMyGoodsDetailRef = ref(); //弹窗dom元素
	const adddeleteList = ref([]); //选中的商品规格id列表
	const page = ref(1);
	const total = ref(0);
	const title = ref('没有更多商品');
	// 获取品牌列表
	const OrderGoodsList = _.debounce(
		async () => {
			let data = {
				brandId: store.state.checkBrandItem.id,
				keyword: keyword.value, //搜索关键词：商品型号/商品名称/商品规格
				limit: 0,
				page: page.value,
				typeId: store.state.checkClassifyItem.id,
			};
			uni.showLoading({
				title: '加载中...',
				mask: true,
			});
			await apiGoods.getOrderGoodsList(data).then((res) => {
				if (res.code == 20000) {
					if (page.value == 1) {
						orderGoodsList.value = res.data.rows;
					} else {
						orderGoodsList.value = [...orderGoodsList.value, ...res.data.rows];
					}
					total.value = res.data.total;
				}
			});
			uni.hideLoading();
		},
		600,
		{leading: false},
	);
	// 底部加载更多
	onReachBottom(() => {
		if (orderGoodsList.value.length < total.value) {
			page.value += 1;
			OrderGoodsList();
		}
	});
	// 下拉刷新
	onPullDownRefresh(async () => {
		page.value = 1;
		keyword.value = '';
		await OrderGoodsList();
		uni.stopPullDownRefresh();
	});
	// 查看明细
	const lookDetail = () => {
		popupMyGoodsDetailRef.value.open();
	};
	// 删除明细列表的商品
	const deleteGoodsDetail = (item) => {
		store.commit('deleteGoods', item);
		getAddgoodsList(store.state.orderGoodsTypes);
	};
	// 确认提交
	const btnSubmit = () => {
		if (isShowGoodDetailList.value && popupMyGoodsDetailRef.value) {
			popupMyGoodsDetailRef.value.open()
			isShowGoodDetailList.value = false
			return
		}
		
		if (isShowGoodDetailList.value && popupMyGoodsDetailRef.value) {
			popupMyGoodsDetailRef.value.close()
			isShowGoodDetailList.value = true
		}

		var pages = getCurrentPages();
		var pageIndex = pages
			.slice()
			.reverse()
			.findIndex((o) => o.route == 'pages_network/home/addOrder/engineerMachine/add');
		if (pageIndex == -1) {
			uni.navigateTo({
				url: '/pages_network/home/addOrder/engineerMachine/add',
			});
		} else {
			uni.navigateBack({delta: pageIndex});
		}
	};
	//显示已选择 商品规格 id列表
	const getAddgoodsList = (arry) => {
		adddeleteList.value = [];
		arry.filter((o) => {
			if (o.brandId == store.state.checkBrandItem.id) {
				o.checkClassifyList.filter((i) => {
					if (i.classifyId == store.state.checkClassifyItem.id) {
						i.orderGoodsVos.filter((m) => {
							adddeleteList.value.push(m.goodsSpecId);
						});
					}
				});
			}
		});
	};
	// 预览图片
	const lookImg = (url) => {
		uni.previewImage({
			urls: [url],
		});
	};
	// 添加商品
	const addGoods = (item) => {
		let tmp = {
			buyTime: item?.buyTime || '',
			buyMarket: item?.buyMarket || '',
			codeIds: [],
			endTime: '',
			goodsId: item.id,
			goodsSpecId: item.specId,
			id: null,
			qty: 1,
			name: item.name,
			specName: item.specName,
			code: '',
			brandId: item.brandId,
			brand: item.brand,
			typeId: item.typeId,
			type: item.type,
			model: item.model,
			image: item.image,
			goodsCode: item.code,
			typeGoods: 3, //1-客户已登记商品，2-未登记商品，3-商品信息
		};
		let orderGoodsTypes = store.state.orderGoodsTypes;
		if (store.state.orderGoodsTypes.length == 0) {
			orderGoodsTypes.push({
				brandId: item.brandId,
				type: 3,
				checkClassifyList: [{classifyId: item.typeId, orderGoodsVos: [tmp]}],
			});
		} else {
			const brandIndex = store.state.orderGoodsTypes.findIndex((brand) => brand.brandId === item.brandId)
			if (brandIndex >= 0) {
				const brand = store.state.orderGoodsTypes[brandIndex]
				const classifyIndex = brand.checkClassifyList.findIndex((classify) => classify.classifyId === item.typeId)
				if (classifyIndex >= 0) {
					store.state.orderGoodsTypes[brandIndex].checkClassifyList[classifyIndex].orderGoodsVos.push(tmp)
				} else {
					store.state.orderGoodsTypes[brandIndex].checkClassifyList.push({
						classifyId: item.typeId,
						orderGoodsVos: [tmp],
					})
				}
			} else {
				orderGoodsTypes.push({
					brandId: item.brandId,
					type: 3,
					checkClassifyList: [{classifyId: item.typeId, orderGoodsVos: [tmp]}],
				});
			}
		}
		getAddgoodsList(orderGoodsTypes);
		store.commit('setorderGoodsTypes', orderGoodsTypes);
	};
	// 删除商品
	const deleteGoods = (item) => {
		let tmp = {
			buyTime: '',
			buyMarket: '',
			codeIds: [],
			endTime: '',
			goodsId: item.id,
			goodsSpecId: item.specId,
			id: null,
			qty: 1,
			name: item.name,
			specName: item.specName,
			code: '',
			brandId: item.brandId,
			brand: item.brand,
			typeId: item.typeId,
			type: item.type,
			model: item.model,
			image: item.image,
			typeGoods: 3, //1-客户已登记商品，2-未登记商品，3-商品信息
		};
		store.commit('deleteGoods', tmp);
		getAddgoodsList(store.state.orderGoodsTypes);
	};
</script>

<style lang="scss">
	.good-qty-fill {
		display: flex;
		align-items: center;

		.label {
			color: #999;
		}
	}

	.content_goods {
		width: 100vw;
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */

		background-color: #f6f7fa;

		.header_top {
			padding: 10rpx 0;
			background-color: #f6f7fa;
			position: fixed;
			width: 100%;
			z-index: 9;

			.search_card {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 10rpx 24rpx;

				.left_s {
					display: flex;
					align-items: center;
					background-color: #fff;
					border-radius: 40rpx;
					height: 80rpx;
					width: 100%;

					:deep(.uni-easyinput__content) {
						height: 80rpx;
						border-radius: 40rpx 0 0 40rpx;

						&.is-focused {
							.uniui-clear,
							.uniui-eye-filled {
								color: #007cff99 !important;
							}
						}
					}

					.search_btn {
						font-size: 28rpx;
						border-left: 2rpx solid #007cff;
						color: #000;
						line-height: 40rpx;
						padding: 0 20rpx;
						height: 40rpx;
						color: #007cff;
						border-radius: 0 40rpx 40rpx 0;
					}
				}
			}
		}

		.bodyer {
			width: 100%;
			display: flex;
			background-color: #f6f7fa;

			.goods_list {
				margin: 0 24rpx;
				width: 100%;
				margin-top: 100rpx;

				.no_some {
					font-size: 24rpx;
					color: #ccc;
					text-align: center;
					width: 100%;
					padding-bottom: 200rpx;
				}

				.goods_item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					background-color: #fff;
					margin: 24rpx 0;
					border-radius: 10rpx;
					padding: 24rpx;

					.goods_item_left {
						display: flex;
						// align-items: center;

						.item_img {
							width: 140rpx;
							height: 140rpx;
							background-color: #fff;
							border-radius: 4rpx;
							border: 1px solid #eee;
						}

						._img {
							width: 140rpx;
							height: 140rpx;
							border-radius: 4rpx;
						}

						.item_title {
							font-size: 24rpx;
							margin-left: 24rpx;
							flex: 1;

							.item_title_name {
								margin-bottom: 10rpx;
								font-weight: bold;
								font-size: 28rpx;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
								overflow: hidden;
								word-wrap: break-word;
								word-break: break-all;
							}

							.item_title_brand {
								font-size: 28rpx;
								margin-bottom: 10rpx;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
								overflow: hidden;
								word-wrap: break-word;
								word-break: break-all;
							}

							.item_title_text {
								font-size: 24rpx;
								color: #777;
								margin-bottom: 10rpx;
								display: flex;
								flex-wrap: wrap;

								.item_title_color {
									color: #000;
									flex: 1;
									display: -webkit-box;
									-webkit-line-clamp: 2;
									-webkit-box-orient: vertical;
									overflow: hidden;
									word-wrap: break-word;
									word-break: break-all;
								}
							}

							.item_title_code {
								font-size: 24rpx;
								color: #777;
							}
						}
					}
				}
			}

			.void_goods {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				width: 100%;
				height: 100vh;
				background-color: #f6f7fa;

				.img {
					width: 60%;
					height: 250rpx;
				}

				.tip {
					color: #aaa;
					font-size: 28rpx;
				}
			}

			.activeBtn {
				position: fixed;
				bottom: 0;
				right: 0;
				left: 0;
				z-index: 101;
				background-color: #fff;
				padding: 30rpx 0 40rpx;
				border-top: 1px solid #eee;

				.btn_Confirm {
					background-color: #f5f7fa;
					display: flex;
					justify-content: space-between;
					border-radius: 50rpx;
					margin: 0rpx 30rpx;

					.show_Confirm {
						font-size: 28rpx;
						display: flex;
						padding: 18rpx;

						.details {
							transform: scale(0.8);
							color: #007cff;
						}
					}

					.btn {
						background-color: #007cff;
						padding: 18rpx;
						border-radius: 0 50rpx 50rpx 0;

						.text {
							color: #fff;
							font-size: 28rpx;
						}
					}
				}
			}
		}

		.goodspopup {
			height: 1100rpx;
			background-color: #f6f7fa;
			position: relative;

			.text_top_popup {
				text-align: center;
				font-size: 32rpx;
				padding: 24rpx 0;
				font-weight: bold;
				background-color: #fff;

				.icon {
					position: absolute;
					right: 30rpx;
					font-weight: 500;
				}
			}

			.goods_list {
				margin: 0 24rpx;
				width: calc(100% - 48rpx);
				overflow-y: auto;
				height: 860rpx;

				.goods_item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					background-color: #fff;
					margin: 24rpx 0;
					border-radius: 4rpx;
					padding: 24rpx;

					&:last-child {
						// margin-bottom: 72rpx;
					}

					.goods_item_left {
						display: flex;
						// align-items: center;

						.item_img {
							width: 140rpx;
							height: 140rpx;
							background-color: #fff;
							border-radius: 4rpx;
							border: 1px solid #eee;
						}

						._img {
							width: 140rpx;
							height: 140rpx;
							border-radius: 4rpx;
						}

						.item_title {
							font-size: 28rpx;
							margin-left: 24rpx;
							flex: 1;

							.item_title_name {
								margin-bottom: 10rpx;
								font-weight: bold;
								font-size: 28rpx;
							}

							.item_title_brand {
								font-size: 28rpx;
								margin-bottom: 10rpx;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
								overflow: hidden;
								word-wrap: break-word;
								word-break: break-all;
							}

							.item_title_text {
								font-size: 24rpx;
								color: #777;
								margin-bottom: 10rpx;
								display: flex;
								flex-wrap: wrap;

								.item_title_color {
									color: #000;
									flex: 1;
									display: -webkit-box;
									-webkit-line-clamp: 2;
									-webkit-box-orient: vertical;
									overflow: hidden;
									word-wrap: break-word;
									word-break: break-all;
								}
							}

							.item_title_code {
								font-size: 24rpx;
								color: #999;
							}
						}
					}
				}

				.void_goods {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					width: 100%;
					height: 60vh;

					.img {
						width: 60%;
						height: 250rpx;
					}

					.tip {
						color: #aaa;
						font-size: 28rpx;
					}
				}
			}
		}
	}
</style>
